<template>
  <d2-container class="page"  style="margin: 0 auto">
    <!--    <d2-page-cover>-->
    <!--      <d2-icon-svg class="logo" name="d2-admin"/>-->
    <!--      <template slot="footer">-->
    <!--        <div class="btn-group">-->
    <!--          <span class="btn-group__btn" @click="$open('https://github.com/d2-projects')">开源组织</span> |-->
    <!--          <span class="btn-group__btn" @click="$open('https://doc.d2admin.fairyever.com/zh/')">文档</span> |-->
    <!--          <span class="btn-group__btn" @click="$open('https://github.com/d2-projects/d2-admin-start-kit')">简化版</span> |-->
    <!--          <span class="btn-group__btn" @click="$open('https://alibaba.github.io/ice/scaffold?type=vue')">飞冰</span> |-->
    <!--          <span class="btn-group__btn" @click="$open('https://juejin.im/user/57a48b632e958a006691b946/posts')">掘金</span> |-->
    <!--          <span class="btn-group__btn" @click="$open('https://daily.fairyever.com')">日报</span> |-->
    <!--          <el-popover :width="172" trigger="hover">-->
    <!--            <p class="d2-mt-0 d2-mb-10">D2Projects</p>-->
    <!--            <img src="./image/qr@2x.png" style="width: 172px;">-->
    <!--            <span slot="reference" class="btn-group__btn btn-group__btn&#45;&#45;link">-->
    <!--              <d2-icon name="weixin"/>-->
    <!--              微信公众号-->
    <!--            </span>-->
    <!--            <p style="font-size: 12px; margin-top: 0px; margin-bottom: 0px;">-->
    <!--              官方公众号，主要推送前端技术类文章、框架资源、学习教程，以及 D2 系列项目更新信息-->
    <!--            </p>-->
    <!--          </el-popover>-->
    <!--        </div>-->
    <!--        <d2-badge/>-->
    <!--        <d2-help-btn/>-->
    <!--      </template>-->
    <!--    </d2-page-cover>-->
<div>
    <h1>
    </h1>

    <div style="margin-bottom: 20px">
      <div id="myChart2" :style="{width: '1200px', height: '300px'}">


      </div>
    </div>

    <div style="margin-bottom: 20px">
      <div id="myChart" :style="{width: '1200px', height: '300px',color:'#ccc'}">

      </div>
    </div>


    <div style="margin-bottom: 20px">
      <div id="myChart3" :style="{width: '1200px', height: '400px',color:'#ccc'}">

      </div>
    </div>
</div>


  </d2-container>
</template>

<script>
import D2HelpBtn from './components/d2-help-btn'
import D2Badge from './components/d2-badge'
import D2PageCover from './components/d2-page-cover'
export default {
  components: {
    D2HelpBtn,
    D2Badge,
    D2PageCover
  },
  data () {
    return {
      filename: __filename
    }
  },
  methods:{
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      let myChart2 = this.$echarts.init(document.getElementById('myChart2'))
      let myChart3 = this.$echarts.init(document.getElementById('myChart3'))

      // 绘制图表
      myChart2.setOption({
        backgroundColor: '#2c343c',
        title: {
          text: '开设课程分析',
          textStyle: {
            color: '#ccc'
          }
        },

        tooltip : {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },

        visualMap: {
          show: false,
          min: 80,
          max: 600,
          inRange: {
            colorLightness: [0, 1]
          }
        },
        series : [
          {
            name:'开设课程占比',
            type:'pie',

            radius : '55%',
            center: ['50%', '50%'],
            textStyle: {
              color: '#ccc'
            },
            data:[
              {value:335, name:'围棋'},
              {value:310, name:'国际象棋'},
              {value:274, name:'五子棋'},
              {value:235, name:'军旗'},
              {value:400, name:'飞行棋'}
            ].sort(function (a, b) { return a.value - b.value; }),
            roseType: 'radius',
            label: {
              normal: {
                textStyle: {
                  color: '#ccc',
                  fontSize:20,

                }
              }
            },
            labelLine: {
              normal: {
                lineStyle: {
                  color: '#ccc'
                },
                smooth: 0.2,
                length: 10,
                length2: 20
              }
            },
            itemStyle: {
              normal: {
                color: '#c23531',
                shadowBlur: 200,
                // shadowColor: 'rgba(0, 0, 0, 0.5)',
                textStyle: {
                  color: '#ccc',
                  fontSize:20,

                }
              }
            },

            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
              return Math.random() * 200;
            }
          }
        ]
      })

      // 绘制图表
      myChart.setOption({
                title: {
                  text: '学生出勤率',
                  textStyle: {
                    color: '#ccc'
                  }},
                legend:{
                  textStyle: {
                    color: '#ccc',
                    fontSize:20,
                  }
                },
                xAxis: {
                  type: 'category',
                  data: ['周一', '周二', '周三', '周四', '周五', '周六', '周末'],
                  textStyle: {
                    color: '#ccc',
                    fontSize:20,
                  }

                },
                yAxis: {
                  type: 'value',
                  textStyle: {
                    color: '#ccc',
                    fontSize:20,
                  }
                },
                series: [{
                  data: [90, 98, 99, 100, 95, 94, 98],
                  type: 'line',
                  textStyle: {
                    color: '#ccc',
                    fontSize:20,

                  }
                }]
              })

      // 绘制图表
      myChart3.setOption({
        title: {
          text: '产品售出比',
          textStyle: {
            color: '#ccc'
          }},
        legend: {},
        tooltip: {
          trigger: 'axis',
          showContent: false
        },
        dataset: {
          source: [
            ['产品', '2012', '2013', '2014', '2015', '2016', '2017'],
            ['围棋', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
            ['五子棋', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
            ['国际象棋', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
            ['军旗', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
          ]
        },
        xAxis: {type: 'category'},
        yAxis: {gridIndex: 0},
        grid: {top: '55%'},
        series: [
          {type: 'line', smooth: true, seriesLayoutBy: 'row'},
          {type: 'line', smooth: true, seriesLayoutBy: 'row'},
          {type: 'line', smooth: true, seriesLayoutBy: 'row'},
          {type: 'line', smooth: true, seriesLayoutBy: 'row'},
          {
            type: 'pie',
            id: 'pie',
            radius: '30%',
            center: ['50%', '25%'],
            label: {
              formatter: '{b}: {@2012} ({d}%)'
            },
            encode: {
              itemName: 'product',
              value: '2012',
              tooltip: '2012'
            }
          }
        ]
      })
    }
  },
  created() {

  },
  mounted() {
    this.drawLine()

  }
}
</script>

<style lang="scss" scoped>
.page {
  .logo {
    width: 120px;
  }
  .btn-group {
    color: $color-text-placehoder;
    font-size: 12px;
    margin-top: 0px;
    margin-bottom: 20px;
    .btn-group__btn {
      color: $color-text-sub;
      &:hover {
        color: $color-text-main;
      }
      &.btn-group__btn--link {
        color: $color-primary;
      }
    }
  }
}
</style>
